<template>
	<view>
		<tabbar></tabbar>
		<view class="bg-blue bor10 mx15">
			<view class="wp100 auto text--center py20 white fwb"><text>累积总收益</text></view>
			<view class="fsb white pb26 px15">
				<view class="text--center">
					<text class="f18">78.31456</text>
					<text class="f13 block mt9">STD总算力(M)</text>
				</view>
				<view class="text--center">
					<text class="f18">78.31456</text>
					<text class="f13 block mt9">BTC总算力(M)</text>
				</view>
				<view class="text--center">
					<text class="f18">78.31456</text>
					<text class="f13 block mt9">ETH总算力(M)</text>
				</view>
			</view>
		</view>
		<view class="f16 border my15 auto mx15 blue text--center py13" @click="pushPage('/pages/Computing/allorder')"><text>全部产品订单</text></view>
		<view class="mx15 bor10 borders my15">
			<view class="bgcc fsb py17 px15">
				<view class="f13">STD当前算力</view>
				<view class="f10" @click="pushPage('/pages/Computing/effective')">
					<text>5个有效产品</text>
					<text class="ash inline-block ml10">></text>
				</view>
			</view>
			<view class="f12 block mx15 py16 ash">STD每日算力</view>
			<div id="container"></div>
		</view>
		<view class="mx15 bor10 borders my15">
			<view class="bgcc fsb py17 px15">
				<view class="f13">ETH当前算力</view>
				<view class="f10">
					<text>5个有效产品</text>
					<text class="ash inline-block ml10">></text>
				</view>
			</view>
			<view class="f12 block mx15 py16 ash">ETH每日算力</view>
			<div id="container1"></div>
		</view>
		<view class="mx15 bor10 borders my15">
			<view class="bgcc fsb py17 px15">
				<view class="f13">BTC当前算力</view>
				<view class="f10">
					<text>5个有效产品</text>
					<text class="ash inline-block ml10">></text>
				</view>
			</view>
			<view class="f12 block mx15 py16 ash">BTC每日算力</view>
			<div id="container2"></div>
		</view>
		<template>
			<image src="../../static/logo/logo.png" style="display: none;" @load="Highcharts.onClick1" :data-option="optin1" mode=""></image>
			<image src="../../static/logo/logo.png" style="display: none;" @load="Highcharts.onClick1" :data-option="optin2" mode=""></image>
			<image src="../../static/logo/logo.png" style="display: none;" @load="Highcharts.onClick1" :data-option="optin3" mode=""></image>
		</template>
	</view>
</template>

<script module="Highcharts" lang="renderjs">
let Highchart = {};
let number = 0;
export default {
	data() {
		return {
			highOpt: {
				chart: {
					zoomType: 'x'
				},
				title: {
					text: ''
				},
				xAxis: {
					type: 'datetime',
					dateTimeLabelFormats: {
						millisecond: '%H:%M:%S.%L',
						second: '%H:%M:%S',
						minute: '%H:%M',
						hour: '%H:%M',
						day: '%m-%d',
						week: '%m-%d',
						month: '%Y-%m',
						year: '%Y'
					}
				},
				tooltip: {
					dateTimeLabelFormats: {
						millisecond: '%H:%M:%S.%L',
						second: '%H:%M:%S',
						minute: '%H:%M',
						hour: '%H:%M',
						day: '%Y-%m-%d',
						week: '%m-%d',
						month: '%Y-%m',
						year: '%Y'
					}
				},
				yAxis: {
					title: {
						text: ''
					}
				},
				legend: {
					enabled: false
				},
				plotOptions: {
					area: {
						fillColor: {
							linearGradient: {
								x1: 0,
								y1: 0,
								x2: 0,
								y2: 1
							},
							stops: []
						},
						marker: {
							radius: 2
						},
						lineWidth: 1,
						states: {
							hover: {
								lineWidth: 1
							}
						},
						threshold: null
					}
				},
				series: [{
					type: 'area',
					name: '算力值',
					data: []
				}]
			},
			seriesData: [],
			isLoad: false
		}
	},
	watch: {
		seriesData(n) {
			if (n.length) {
				this.highOpt.series[0].data = n;
				this.initEcharts()
			}
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.isLoadHighCharts()
		})
	},

	methods: {
		isLoadHighCharts(){
			if (window.Highcharts) {
				this.initEcharts()
			} else {
				const script = document.createElement('script')
				script.src = 'http://cdn.highcharts.com.cn/highcharts/highcharts.js'
				document.head.appendChild(script)
			}
		},
		initEcharts() {
			let interval = setInterval(() => {
				if (Highcharts || number > 20) {
					clearInterval(interval);
					if (!Highcharts) return
					if (!this.highOpt.plotOptions.area.fillColor.stops.length) {

						let stops = [
							[0, new Highcharts.getOptions().colors[0]],
							[1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
						]
						this.highOpt.plotOptions.area.fillColor.stops = stops;
					}
					Highchart.container = Highcharts.chart('container', this.highOpt);
					Highchart.container = Highcharts.chart('container1', this.highOpt);
					Highchart.container = Highcharts.chart('container2', this.highOpt);
				} else {
					number++
				}
			}, 500)
		},
		onClick1(e) {
			let optionJson = e.currentTarget.dataset.option;
			// #ifdef H5
			this.seriesData = JSON.parse(optionJson)
			// #endif
			// #ifndef H5
			this.seriesData = JSON.parse(JSON.parse(optionJson))
			// #endif
		}
	}
}
</script>

<script>
let HighchartsOption = {
	gridLineWidth: 1,
	minTickInterval: 1,
	lineWidth: 1,
	lineColor: '#000000',
	minorGridLineDashStyle: 'dash',
	minorTickInterval: 'auto',
	minorTickWidth: 1,
	minorGridLineWidth: 0,
	tickLength: 0,
	allowDecimals: true,
	tickAmount: 5
};
export default {
	data() {
		return {
			opt: {
				title: {
					text: ''
				},
				legend: {
					enabled: false
				},
				credits: {
					enabled: false
				},
				xAxis: [
					{
						...HighchartsOption,
						title: {
							enabled: false
						}
					},
					{
						...HighchartsOption,
						labels: {
							enabled: false
						},
						title: {
							enabled: false
						},
						opposite: true
					}
				],
				yAxis: [
					{
						...HighchartsOption,
						title: {
							enabled: false
						}
					},
					{
						...HighchartsOption,
						labels: {
							enabled: false
						},
						title: {
							enabled: false
						},
						opposite: true
					}
				]
			},
			opt1: [
				[1370131200000, 0.7695],
				[1370217600000, 0.7648],
				[1370304000000, 0.7645],
				[1370390400000, 0.7638],
				[1370476800000, 0.7549],
				[1370563200000, 0.7562],
				[1370736000000, 0.7574],
				[1370822400000, 0.7543],
				[1370908800000, 0.751],
				[1370995200000, 0.7498],
				[1371081600000, 0.7477],
				[1371168000000, 0.7492]
			],
			opt2: [
				[1370131200000, 0.7695],
				[1370217600000, 0.7648],
				[1370304000000, 0.7645],
				[1370390400000, 0.7638],
				[1370476800000, 0.7549],
				[1370563200000, 0.7562],
				[1370736000000, 0.7574],
				[1370822400000, 0.7543],
				[1370908800000, 0.751],
				[1370995200000, 0.7498],
				[1371081600000, 0.7477],
				[1371168000000, 0.7492]
			],
			opt3: [
				[1370131200000, 0.7695],
				[1370217600000, 0.7648],
				[1370304000000, 0.7645],
				[1370390400000, 0.7638],
				[1370476800000, 0.7549],
				[1370563200000, 0.7562],
				[1370736000000, 0.7574],
				[1370822400000, 0.7543],
				[1370908800000, 0.751],
				[1370995200000, 0.7498],
				[1371081600000, 0.7477],
				[1371168000000, 0.7492]
			]
		};
	},
	computed: {
		optin1() {
			return JSON.stringify(this.opt1);
		},
		optin2() {
			return JSON.stringify(this.opt2);
		},
		optin3() {
			return JSON.stringify(this.opt3);
		}
	},
	methods: {
		toggle() {
			this.opt1 = [];
			this.isLoadHighCharts();
		}
	}
};
</script>

<style lang="scss">
.highcharts-container {
	width: 750rpx;
	height: 600rpx;
}

#container,
#container1,#container2 {
	width: 100%;
	height: 500rpx;
}
.bg-blue {
	background-color: #309ee4;
}
.border {
	background: #ffffff;
	border: 1rpx solid #308ae4;
	border-radius: 16rpx;
}
.bgcc {
	background: rgba(233, 236, 240, 0.5);
}
.borders {
	border: 1rpx solid #d7d7d7;
	border-radius: 8rpx;
}
</style>
